{% extends 'base.html' %}
{% load static %}

{% block title %}创建盘点计划{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-plus-circle me-2"></i>创建盘点计划</h5>
                </div>
                
                <div class="card-body">
                    <form method="post" id="inventoryPlanForm">
                        {% csrf_token %}
                        
                        <div class="row">
                            <!-- 基本信息 -->
                            <div class="col-md-6">
                                <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>基本信息</h6>
                                
                                <div class="mb-3">
                                    <label for="name" class="form-label">计划名称 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="plan_type" class="form-label">盘点类型 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="plan_type" name="plan_type" required>
                                        <option value="">请选择盘点类型</option>
                                        {% for value, label in type_choices %}
                                            <option value="{{ value }}">{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">
                                        <small>
                                            <strong>全面盘点：</strong>对所有资产进行盘点<br>
                                            <strong>部分盘点：</strong>对指定范围内的资产进行盘点<br>
                                            <strong>抽查盘点：</strong>随机抽取部分资产进行盘点
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="description" class="form-label">计划描述</label>
                                    <textarea class="form-control" id="description" name="description" rows="3" 
                                              placeholder="请输入盘点计划的详细描述..."></textarea>
                                </div>
                            </div>
                            
                            <!-- 时间安排 -->
                            <div class="col-md-6">
                                <h6 class="mb-3"><i class="fas fa-calendar-alt me-2"></i>时间安排</h6>
                                
                                <div class="mb-3">
                                    <label for="planned_start_date" class="form-label">计划开始时间 <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" id="planned_start_date" 
                                           name="planned_start_date" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="planned_end_date" class="form-label">计划结束时间 <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" id="planned_end_date" 
                                           name="planned_end_date" required>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- 盘点范围 -->
                        <div class="row" id="scopeSection">
                            <div class="col-12">
                                <h6 class="mb-3"><i class="fas fa-bullseye me-2"></i>盘点范围</h6>
                                <p class="text-muted small">选择需要盘点的资产范围，不选择表示包含所有</p>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">部门范围</label>
                                    <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                                        {% for department in departments %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       name="departments" value="{{ department.id }}" 
                                                       id="dept_{{ department.id }}">
                                                <label class="form-check-label" for="dept_{{ department.id }}">
                                                    {{ department.name }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">资产类别</label>
                                    <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                                        {% for category in categories %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       name="categories" value="{{ category.id }}" 
                                                       id="cat_{{ category.id }}">
                                                <label class="form-check-label" for="cat_{{ category.id }}">
                                                    {{ category.name }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">位置范围</label>
                                    <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                                        {% for location in locations %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       name="locations" value="{{ location.id }}" 
                                                       id="loc_{{ location.id }}">
                                                <label class="form-check-label" for="loc_{{ location.id }}">
                                                    {{ location.name }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- 人员分配 -->
                        <div class="row">
                            <div class="col-12">
                                <h6 class="mb-3"><i class="fas fa-users me-2"></i>人员分配</h6>
                                
                                <div class="mb-3">
                                    <label class="form-label">盘点人员</label>
                                    <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                                        {% for user in users %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       name="assignees" value="{{ user.id }}" 
                                                       id="user_{{ user.id }}">
                                                <label class="form-check-label" for="user_{{ user.id }}">
                                                    {{ user.get_full_name|default:user.username }}
                                                    {% if user.userprofile.department %}
                                                        <small class="text-muted">({{ user.userprofile.department.name }})</small>
                                                    {% endif %}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="row">
                            <div class="col-12">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'assets:inventory_plan_list' %}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i>返回列表
                                    </a>
                                    <div>
                                        <button type="button" class="btn btn-outline-primary me-2" id="previewBtn">
                                            <i class="fas fa-eye me-1"></i>预览资产数量
                                        </button>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-1"></i>创建计划
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 预览模态框 -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">资产数量预览</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="previewContent">
                    <div class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 设置默认时间
    const now = new Date();
    const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
    const nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
    
    document.getElementById('planned_start_date').value = tomorrow.toISOString().slice(0, 16);
    document.getElementById('planned_end_date').value = nextWeek.toISOString().slice(0, 16);
    
    // 盘点类型变化时的处理
    document.getElementById('plan_type').addEventListener('change', function() {
        const scopeSection = document.getElementById('scopeSection');
        if (this.value === 'full') {
            scopeSection.style.display = 'none';
            // 清除所有选择
            document.querySelectorAll('#scopeSection input[type="checkbox"]').forEach(cb => cb.checked = false);
        } else {
            scopeSection.style.display = 'block';
        }
    });
    
    // 预览按钮点击事件
    document.getElementById('previewBtn').addEventListener('click', function() {
        const formData = new FormData(document.getElementById('inventoryPlanForm'));
        
        // 这里可以添加AJAX请求来获取预览数据
        // 暂时显示静态内容
        document.getElementById('previewContent').innerHTML = `
            <div class="alert alert-info">
                <h6>预计盘点资产数量</h6>
                <p class="mb-0">根据当前选择的范围，预计将包含 <strong>XX</strong> 个资产进行盘点。</p>
                <small class="text-muted">注：实际数量可能因资产状态变化而有所不同</small>
            </div>
        `;
        
        const modal = new bootstrap.Modal(document.getElementById('previewModal'));
        modal.show();
    });
    
    // 表单验证
    document.getElementById('inventoryPlanForm').addEventListener('submit', function(e) {
        const startDate = new Date(document.getElementById('planned_start_date').value);
        const endDate = new Date(document.getElementById('planned_end_date').value);
        
        if (startDate >= endDate) {
            e.preventDefault();
            alert('计划结束时间必须晚于开始时间');
            return false;
        }
        
        if (startDate < new Date()) {
            if (!confirm('计划开始时间早于当前时间，确定要创建吗？')) {
                e.preventDefault();
                return false;
            }
        }
    });
});
</script>
{% endblock %}
